<template>
    <div class="chatList">
        <div class="tab-head">
            <div class="item" :class="{active:item.key == hdTabCur}" v-for="(item, index) in hdTab" :key="index" @click="changeTab(item)">{{item.title}}</div>
        </div>
        <div class="scroll-box">
            <vue-scroll :ops="ops" @handle-scroll="handleScroll" v-if="userList.length>0"
            >
                <div class="chat-item" v-for="(item,index) in userList" :key="index" :class="{active:curId == item.id}" @click="selectUser(item)">
                    <div class="avatar">
                        <img v-lazy="item.avatar" alt="">
                        <div class="status" :class="{off:item.online == 0}"></div>
                    </div>
                    <div class="user-info">
                        <div class="hd">
                            <span class="name line1">{{item.nickname}}</span>
                            <template v-if="item.type == 2">
                                <span class="label">小程序</span>
                            </template>
                            <template v-if="item.type == 3">
                                <span class="label H5">H5</span>
                            </template>
                            <template v-if="item.type == 1">
                                <span class="label wechat">公众号</span>
                            </template>
                            <template v-if="item.type == 0">
                                <span class="label pc">PC端</span>
                            </template>
                        </div>
                        <div class="bd line1">
                            <template v-if="item.message_type <=2">{{item.message}}</template>
                            <template v-if="item.message_type ==3">[图片]</template>
                            <template v-if="item.message_type ==5">[商品]</template>
                            <template v-if="item.message_type ==6">[订单]</template>
                        </div>
                    </div>
                    <div class="right-box">
                        <div class="time">{{item.update_time | toDay}}</div>
                        <div class="num">
                            <Badge :count="item.mssage_num">
                                <a href="#" class="demo-badge"></a>
                            </Badge>
                        </div>
                    </div>
                </div>
            </vue-scroll>
            <empty v-else msg="暂无用户列表" status="1"></empty>
        </div>

    </div>
</template>

<script>
    import { Socket } from '@/libs/socket';
    import dayjs from 'dayjs'
    import { record } from '@/api/kefu'
    import { HappyScroll } from 'vue-happy-scroll'
    import empty from '../../components/empty';
    export default {
        name: 'chatList',
        props: {
            userOnline: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            newRecored: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            searchData: {
                type: String,
                default: ''
            },
            isShow:{
                type:Boolean,
                default:false
            }
        },
        components: {
            HappyScroll,
            empty
        },
        watch: {
            userOnline: {
                handler (nVal, oVal) {
                    if (nVal.hasOwnProperty('to_uid')) {
                        this.userList.forEach((el, index) => {
                            if (el.to_uid == nVal.to_uid) {
                                el.online = nVal.online
                                if (nVal.online == 1) {
                                    this.$Notice.info({
                                        title: '上线通知',
                                        desc: `${el.nickname}上线`
                                    });
                                }
                            }
                        })
                    }
                },
                deep: true
            },
            searchData: {
                handler (nVal, oVal) {
                    if (nVal != oVal) {
                        this.nickname = nVal
                        this.page = 1
                        this.isScroll = true
                        this.userList = []
                        this.isSearch = true
                        this.getList()
                    }
                },
                deep: true
            },
            isShow:{
                handler (nVal, oVal) {
                    if (nVal) {
                        this.wsStart()
                    }
                },
                deep: true
            }
        },
        data () {
            return {
                hdTabCur: 0,
                hdTab: [
                    {
                        key: 0,
                        title: '用户列表'
                    },
                    {
                        key: 1,
                        title: '游客列表'
                    }
                ],
                userList: [],
                curId: '',
                page: 1,
                limit: 15,
                isScroll: true,
                nickname: '',
                isSearch: false,
                ops: {
                    vuescroll: {
                        mode: 'native',
                        enable: false,
                        tips: {
                            deactive: 'Push to Load',
                            active: 'Release to Load',
                            start: 'Loading...',
                            beforeDeactive: 'Load Successfully!'
                        },
                        auto: false,
                        autoLoadDistance: 0,
                        pullRefresh: {
                            enable: false
                        },
                        pushLoad: {
                            enable: true,
                            auto: true,
                            autoLoadDistance: 10
                        }
                    },
                    bar: {
                        background: '#393232',
                        opacity: '.5',
                        size: '5px'
                    }
                }
            }
        },
        filters: {
            toDay: function (value) {
                if (!value) return ''
                return dayjs.unix(value).format('M月D日 HH:mm')
            }
        },
        mounted () {
            let that = this
            this.bus.$on('change', data => {
                this.nickname = data
            })
            this.getList()
        },
        methods: {
            wsStart(){
                let that = this
                this.bus.pageWs.then(ws => {
                    // 用户转接
                    ws.$on('transfer', data => {
                        let status = false
                        that.userList.forEach((el, index, arr) => {
                            if (data.recored.id == el.id) {
                                status = true
                                if (data.recored.is_tourist == that.hdTabCur) {
                                    let oldVal = data.recored
                                    arr.splice(index, 1)

                                    if (index == 0) {
                                        this.$emit('setDataId', oldVal)
                                        oldVal.mssage_num = 0
                                    }
                                    arr.unshift(oldVal)
                                }
                                this.$Notice.info({
                                    title: '您有一条转接消息！'
                                });
                            }
                        })
                        if (!status) {
                            if (data.recored.is_tourist == this.hdTabCur) { this.userList.unshift(data.recored) }
                        }
												that.$emit('changeLen', 1)
                    })
                    ws.$on('mssage_num', data => {
                        if (data.recored.id) {
                            let status = false
                            that.userList.forEach((el, index, arr) => {
                                if (data.recored.id == el.id) {
                                    status = true
                                    if (data.recored.is_tourist == that.hdTabCur) {
                                        let oldVal = data.recored
                                        arr.splice(index, 1)
                                        arr.unshift(oldVal)
                                    }
                                }
                            })
                            if (!status) {
                                if (data.recored.is_tourist == this.hdTabCur) { this.userList.unshift(data.recored) }
                            }
                        }
												that.$emit('changeLen', 1)
                        if (data.recored.is_tourist != this.hdTabCur && data.recored.id) {
                            this.$Notice.info({
                                title: this.hdTabCur ? '用户发来消息啦！' : '游客发来消息啦！'
                            });
                        }
                    })
                    ws.$on('chat', data => {
                      for (let i = 0; i < this.userList.length; i++) {
                        if (this.userList[i].to_uid == data.to_uid) {
                          this.userList[i].message_type = data.msn_type
                          let message = data.msn.match(/em-([\s\S]*?)-([\s\S])/g)
                          if (message) {
                            message = `[${message[0]}]`
                          } else {
                            message = data.msn
                          }
                          this.userList[i].message = message
                          break;
                        }
                      }
                    })
                });
            },
            // 切换
            changeTab (item) {
                if (this.hdTabCur == item.key) return
                this.hdTabCur = item.key
                this.isScroll = true
                this.page = 1
                this.userList = []
                this.$emit('changeType', item.key)
                this.getList()
            },
            getList () {
                if (!this.isScroll) return
                record({
                    nickname: this.nickname,
                    page: this.page,
                    limit: this.limit,
                    is_tourist: this.hdTabCur
                }).then(res => {
									  this.$emit('changeLen', res.data.length)
                    if (res.data.length > 0) {
                        res.data[0].mssage_num = 0
                        this.isScroll = res.data.length >= this.limit

                        this.userList = this.userList.concat(res.data)
                        if (this.page == 1 && res.data.length > 0 && !this.isSearch) {
                            this.curId = res.data[0].id
                            this.$emit('setDataId', res.data[0])
                        }
                        this.page++
                    } else {
                        this.$emit('setDataId', 0)
                    }
                })
            },
            chartReachBottom () {
                this.getList()
            },
            // 选择用户
            selectUser (item) {
                if (this.curId == item.id) return
                item.mssage_num = 0
                this.curId = item.id
                this.$emit('setDataId', item)
            },
            handleScroll (vertical, horizontal, nativeEvent) {
                if (vertical.process == 1) {
                    this.getList()
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .chatList
        display flex
        flex-direction column
        width 320px
        height 742px
        border-right 1px solid #ECECEC
        .tab-head
            display flex
            align-items center
            justify-content space-between
            height 50px
            flex-shrink 0
            padding 0 52px
            font-size 14px
            color #000000
            .item
                position relative
                cursor pointer
                &:after
                    display none
                    content ' '
                    position absolute
                    left 50%
                    bottom -15px
                    transform translateX(-50%)
                    height 2px
                    width 100%
                    background #1890FF
                &.active
                    color #1890FF
                    &:after
                        display block

        .scroll-box
            flex 1
            height 500px
            overflow hidden
        .chat-item
            display flex
            align-items center
            justify-content space-between
            padding 12px 10px
            height 74px
            box-sizing border-box
            border-left 3px solid transparent
            cursor pointer
            &.active
                background #EFF0F1
                border-left 3px solid #1890FF
            .avatar
                position relative
                width 40px
                height 40px
                img
                    display block
                    width 100%
                    height 100%
                    border-radius 50%
                .status
                    position absolute
                    right 3px
                    bottom 0
                    width 8px
                    height 8px
                    background #48D452
                    border 1px solid #fff
                    border-radius 50%
                    &.off
                        background #999999
            .user-info
                width 155px
                margin-left 12px
                margin-top: 5px;
                font-size 16px
                .hd
                    display flex
                    align-items center
                    color: rgba(0, 0, 0, 0.65);
                    .name
                        max-width 67%
                    .label
                        margin-left 5px
                        color #3875EA
                        font-size 12px
                        background #D8E5FF
                        border-radius 2px
                        padding 1px 5px
                        &.H5
                            background #FAF1D0
                            color #DC9A04
                        &.wechat
                            background: rgba(64, 194, 73, 0.16);
                            color #40C249
                        &.pc
                            background: rgba(100, 64, 194, 0.16);
                            color #6440C2
                .bd
                    margin-top 3px
                    font-size 12px
                    color #8E959E
            .right-box
                position relative
                flex 1
                display flex
                flex-direction column
                align-items flex-end
                color #8E959E
                .num
                    margin-right 12px
            .chart-scroll
                margin-top -10px
</style>
